import React, {Component, Fragment} from 'react';
import {Card, Carousel} from 'antd';

import './ui.less';

class Carousels extends Component {
    render() {
        return (
            <Fragment>
                <Card title={'文字轮播效果'} className={'card-wrap'}>
                    <Carousel autoplay={true} effect={'fade'}>
                        <h1>React</h1>
                        <h1>React-Router</h1>
                        <h1>Redux</h1>
                    </Carousel>
                </Card>
                <Card title={'图片轮播效果'} className={'card-wrap'}>
                    <Carousel autoplay={true} effect={'fade'}>
                        <img src={'/assets/carousel/1.jpg'} alt={'轮播图'} />
                        <img src={'/assets/carousel/2.jpg'} alt={'轮播图'} />
                        <img src={'/assets/carousel/3.jpg'} alt={'轮播图'} />
                        <img src={'/assets/carousel/4.jpg'} alt={'轮播图'} />
                        <img src={'/assets/carousel/5.jpg'} alt={'轮播图'} />
                    </Carousel>
                </Card>
            </Fragment>
        );
    }
}

export default Carousels;